<!--考生详情-->
<div class="layuimini-container layuimini-page-anim">
  <div class="layuimini-main">
    <fieldset class="table-search-fieldset">
      <legend>搜索信息</legend>
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">考生姓名</label>
              <div class="layui-input-inline">
                <input type="text" name="username" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i
                      class="layui-icon"></i> 搜 索
              </button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>
    <table class="layui-hide" id="detailsTable" lay-filter="currentTableFilter"></table>
    <script type="text/html" id="detailsTableBar">
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">修改</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>
  </div>
</div>
<!--添加按钮-->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-normal data-add-btn layui-btn-sm" lay-event="add">添加考生</button>
  </div>
</script>

<!--添加编辑考生模板-->
<script type="text/html" id="add-temp">
  <div class="layui-form layuimini-form u-p-t-20 u-p-r-20">
    <div class="layui-form-item">
      <label class="layui-form-label required">姓名</label>
      <div class="layui-input-block">
        <input type="text" name="username" lay-verify="required" lay-reqtext="不能为空" placeholder="请输入" value="" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label required">性别</label>
      <div class="layui-input-block">
        <input type="text" name="username" lay-verify="required" lay-reqtext="不能为空" placeholder="请输入" value="" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label required">身份证号码</label>
      <div class="layui-input-block">
        <input type="text" name="username" lay-verify="required" lay-reqtext="不能为空" placeholder="请输入" value="" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label required">联系电话</label>
      <div class="layui-input-block">
        <input type="text" name="username" lay-verify="required" lay-reqtext="不能为空" placeholder="请输入" value="" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label required">报考类型</label>
      <div class="layui-input-block">
        <input type="text" name="username" lay-verify="required" lay-reqtext="不能为空" placeholder="请输入" value="" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label required">所属单位</label>
      <div class="layui-input-block">
        <input type="text" name="username" lay-verify="required" lay-reqtext="不能为空" placeholder="请输入" value="" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label required">所在地区</label>
      <div class="layui-input-block">
        <input type="text" name="username" lay-verify="required" lay-reqtext="不能为空" placeholder="请输入" value="" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">保存</button>
        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">取消</button>
      </div>
    </div>
  </div>
</script>

<script>
  var tableData = [
    {
      'id': 10000,
      name: '张明明',
      sex: '女',
      idCard: '52222112',
      phone: '185939439434',
      type: '安管人员',
      phone: '185939439434',
      danwei: '安徽理工大学',
      area: '田家庵区'
    },
    {
      'id': 10000,
      name: '张明明',
      sex: '女',
      idCard: '52222112',
      phone: '185939439434',
      type: '安管人员',
      phone: '185939439434',
      danwei: '安徽理工大学',
      area: '田家庵区'
    },
    {
      'id': 10000,
      name: '张明明',
      sex: '女',
      idCard: '52222112',
      phone: '185939439434',
      type: '安管人员',
      phone: '185939439434',
      danwei: '安徽理工大学',
      area: '田家庵区'
    },
    {
      'id': 10000,
      name: '张明明',
      sex: '女',
      idCard: '52222112',
      phone: '185939439434',
      type: '安管人员',
      phone: '185939439434',
      danwei: '安徽理工大学',
      area: '田家庵区'
    },
    {
      'id': 10000,
      name: '张明明',
      sex: '女',
      idCard: '52222112',
      phone: '185939439434',
      type: '安管人员',
      phone: '185939439434',
      danwei: '安徽理工大学',
      area: '田家庵区'
    },
    {
      'id': 10000,
      name: '张明明',
      sex: '女',
      idCard: '52222112',
      phone: '185939439434',
      type: '安管人员',
      phone: '185939439434',
      danwei: '安徽理工大学',
      area: '田家庵区'
    },
    {
      'id': 10000,
      name: '张明明',
      sex: '女',
      idCard: '52222112',
      phone: '185939439434',
      type: '安管人员',
      phone: '185939439434',
      danwei: '安徽理工大学',
      area: '田家庵区'
    },
  ]
  layui.use(['form', 'table', 'miniPage', 'element'], function () {
    var $ = layui.jquery,
      form = layui.form,
      table = layui.table,
      miniPage = layui.miniPage

    table.render({
      elem: '#detailsTable',
      data: tableData,
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print'],
      cols: [[
        { field: 'id', title: '序号', sort: true },
        { field: 'name', title: '姓名' },
        { field: 'sex', title: '性别' },
        { field: 'idCard', title: '身份证号' },
        { field: 'phone', title: '联系电话' },
        { field: 'type', title: '报考类型' },
        { field: 'danwei', title: '所属单位' },
        { field: 'area', title: '所在地区' },
        { title: '操作', minWidth: 100, toolbar: '#detailsTableBar', align: 'center' }
      ]],

      page: true,
      skin: 'line'
    })

    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {
      var result = JSON.stringify(data.field)
      layer.alert(result, {
        title: '最终的搜索信息'
      })

      //执行搜索重载
      table.reload('currentTableId', {
        page: {
          curr: 1
        }
        , where: {
          searchParams: result
        }
      }, 'data')

      return false
    })

    // 添加考生
    table.on('toolbar(currentTableFilter)', function (obj) {
      if (obj.event === 'add') {
        var index = layer.open({
          title: '添加考生',
          type: 1,
          shade: 0.2,
          maxmin: true,
          shadeClose: true,
          area: ['500px', '500px'],
          // offset: [openWH[2] + 'px', openWH[3] + 'px'],
          content: $('#add-temp').html(),
        })
      }
    })

    // 编辑
    table.on('tool(currentTableFilter)', function (obj) {
      var data = obj.data
      if (obj.event === 'edit') {
        var index = layer.open({
          title: '编辑用户',
          type: 1,
          shade: 0.2,
          maxmin: true,
          shadeClose: true,
          area: ['500px', '500px'],
          content:  $('#add-temp').html(),
        })
        $(window).on('resize', function () {
          layer.full(index)
        })
        return false
      } else if (obj.event === 'delete') {
        layer.confirm('真的删除行么', function (index) {
          obj.del()
          layer.close(index)
        })
      }
    })

  })
</script>
